<template>
  <div class="container">
    <div class="login">
      <div class="t">
        <div>
          <a href="#">手机号注册</a>
        </div>
      </div>
      <div class="m">
        <div class="flex">
          <img src="../assets/login_icon.svg" width="20px" alt="">
          <input type="text" placeholder="请输入手机号" v-model="ph">
          <span v-if="/^1[3-9]\d{9}$/.test(ph)&&zt==200">✔️</span>
          <span v-else-if="zt==401" class="font">账号已存在,请重输</span>
          <span v-else>❎</span>
        </div>
        <div class="flex">
          <img src="../assets/pwd.svg" width="20px" alt="">
          <input type="password" placeholder="请输入密码" v-model="pw">
          <span v-if="/\w{6,16}/.test(pw)">✔️</span>
          <span v-else>❎</span>
        </div>
        <div class="flex">
          <img src="../assets/pwd.svg" width="20px" alt="">
          <input type="password" placeholder="请输入重复密码" v-model="rpw">
          <span v-if="rpw==pw">✔️</span>
          <span v-else>❎</span>
        </div>
        <div class="flex">
          <img src="../assets/yzm.svg" width="20px" alt="">
          <input type="password" placeholder="请输入验证码">
          <div>获取验证码</div>
        </div>
        <button @click="register">注册</button>
      </div>
      <div class="b"> 
        <img src="../assets/zfb.png" width="20px" alt="">
        <span>支付宝</span>
        <img src="../assets/weixin.png" width="20px" alt="">
        <span>微信</span>
        <router-link to="/login" class="ts">登录账号 ></router-link>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ph: '',
        pw:'',
        rpw:'',
        zt:''
      }
    },
    watch:{
      ph(newVal,oldVal){
        console.log(newVal,oldVal);
        this.axios.get(`/register/:ph=${newVal}`).then(res=>{
          console.log(res);
          this.zt=res.data.code
        })
      }
    },
    methods: {
      register() {
        if(/^1[3-9]\d{9}$/.test(this.ph)&&this.zt==200&&/\w{6,16}/.test(this.pw)&&this.rpw==this.pw){
          this.axios.post(`/register/:ph=${this.ph}/:pw=${this.pw}`).then(res=>{
            console.log(res);
            if(res.data.code==200){
              alert('注册成功')
              this.$router.push('/login')
            }else{
              alert('注册失败')
            }
          })
          // alert('注册成功')
        }else{
          alert('失败！账号或密码格式错误！')
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .container{
    width: 1000px;
    height: 440px;
    background-image: url('/src/assets/login_bg.jpeg');
    margin-top: 20px;
    .login{
      width: 330px;
      height: 400px;
      background-color: #fff;
      border-radius: 10px;
      float: right;
      margin-right: 10px;
      margin-top: 20px;
      .t{
        border-bottom: 2px solid #d2d2d2;
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        div{
          font-size: 20px;
          a{
            color: #333;
          }
        }
      }
      .m{
        position: relative;
        padding: 10px;
        margin-top: 30px;
        text-align: center;
        .flex{
          display: flex;
          align-items: center;
          border-bottom: 1px solid #ddd;
          padding: 8px;
          input{
            margin-left: 10px;
            width: 160px;
            height: 20px;
            outline: none;
            border: 0;
          }
          span.font{
            color: red;
            font-size: 12px;
          }
          >div{
            font-size: 12px;
            color: #333;
            margin-left: 20px;
          }
        }
        button{
          width: 207px;
          height: 33px;
          cursor: pointer;
          background-color: #884e22;
          font-size: 16px;
          color: #fff;
          border: 1px solid #884e22;
          margin-top: 20px;
          border-radius: 5px;
        }
      }
      .b{
        margin-top: 40px;
        background-color: #f5f5f5;
        width: 330px;
        height: 50px;
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #333;
        border-radius: 10px;
        img{
          margin-left: 20px;
          margin-right: 5px;
        }
        .ts{
          margin-left: 60px;
          color: #e60634;
        }
      }
    }
  }
</style>